<template>
  <div class="home-container">
    <!-- 大屏幕侧边栏 -->
    <el-aside
      v-if="isDesktop"
      width="240px"
      class="sidebar"
    >
      <div class="sidebar-banner">
        <h2>博客管理系统</h2>
      </div>
      <el-menu
        :default-active="$route.path"
        class="sidebar-menu"
        router
      >
        <el-menu-item index="/blogs">
          <el-icon><Document /></el-icon>
          <span>博客列表</span>
        </el-menu-item>
        <el-menu-item index="/categories">
          <el-icon><Folder /></el-icon>
          <span>分类管理</span>
        </el-menu-item>
        <el-menu-item index="/users">
          <el-icon><User /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="/files">
          <el-icon><Upload /></el-icon>
          <span>文件管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主内容区域 -->
    <el-container class="main-container">
      <el-header class="header">
        <el-button @click="logout" class="logout-btn">退出登录</el-button>
      </el-header>
      <el-main class="main-content">
        <router-view/>
      </el-main>
    </el-container>

    <!-- 移动端底部导航栏 -->


    <el-menu
      v-if="!isDesktop"
      :value="$route.path"
      class="mobile-nav" router
    >
      <el-menu-item class="mobile-menu-item" index="/blogs">
        <el-icon class="el-icon"><Document /></el-icon>
      </el-menu-item>

      <el-menu-item class="mobile-menu-item" index="/categories">
        <el-icon class="el-icon"><Folder /></el-icon>
      </el-menu-item>

      <el-menu-item class="mobile-menu-item" index="/users">
        <el-icon class="el-icon"><User /></el-icon>
      </el-menu-item>

      <el-menu-item class="mobile-menu-item" index="/files">
        <el-icon class="el-icon"><Upload /></el-icon>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
// 导入需要的图标
import { Document, Folder, User, Upload } from '@element-plus/icons-vue'

const router = useRouter()

// 判断是否为桌面端
const isDesktop = ref(true)
// 移动端菜单状态
const mobileMenuOpen = ref(false)

// 检查屏幕尺寸
const checkScreenSize = () => {
  // 当窗口宽度小于768px时切换为移动端布局
  isDesktop.value = window.innerWidth >= 768
}

// 切换移动端菜单
const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value
}

// 挂载时添加监听
onMounted(() => {
  window.addEventListener('resize', checkScreenSize)
  // 初始化时检查一次
  checkScreenSize()
})

// 卸载时移除监听
onUnmounted(() => {
  window.removeEventListener('resize', checkScreenSize)
})

// 登出功能
const logout = () => {
  localStorage.removeItem('isLoggedIn')
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  ElMessage.success('退出登录成功')
  router.push('/login')
}
</script>

<style scoped>
.home-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

/* 桌面端样式 */
@media (min-width: 768px) {
  .home-container {
    flex-direction: row;
  }

  .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .sidebar {
    background-color: #f5f5f5;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    height: 100vh;
  }
}

/* 移动端样式 */
@media (max-width: 767px) {
  .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px); /* 减去底部导航栏高度 */
  }

  .mobile-nav .mobile-menu-item {
    justify-content: center;
    line-height: 50px;
    width: 80px;
  }

  .mobile-nav .mobile-menu-item .el-icon {
    margin-right:0px
  }

  .mobile-nav {
    display: flex;
    justify-content: space-around;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #fff;
    border-top: 1px solid #eee;
    z-index: 100;
  }
}

.header {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 60px;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-right: auto;
}

.mobile-menu-btn {
  margin-right: 16px;
  background-color: #f5f5f5;
}

.main-content {
  padding: 20px;
  background-color: #f9f9f9;
  flex: 1;
  overflow-y: auto;
}

.logout-btn {
  margin-left: auto;
}

.sidebar-banner {
  line-height: 60px;
  background-color: #409eff;
  color: white;
  text-align: center;
  border-bottom: 1px solid #e6e6e6;
}

.sidebar-banner h2 {
  font-size: 18px;
  margin: 0;
}

.sidebar-menu {
  padding-top: 10px;
}

</style>